﻿<div >
   <div id="hub" >
    <div class="panorama">
        <div class="panorama-sections" style="width:auto">
   
            <div id="section1" class="panorama-section " style="clear:both; width:100%;">
                <h2 style="margin:0 0 0 0;">X Axis (horizontal axis) settings</h2>
                <div class="row-fluid">
				    <div class="span6" style="margin-top:10px;" >
                         <h4 class="text-left" style="">
				            x Axis name:
			            </h4>
				    </div>
				    <div class="span6" style="margin-top:10px;">
                         <select name="FieldName" title="Field Name" class="ms-input" id="Select2" onchange="xAxisChange(this);">
                            <option value="empty">- select -</option>
                            <%for(var i=0; i < App.ListFields.length; i ++){%>
                             <%if(!App.ListFields.at(i).get('itemTitle')) continue;%>
                            <option value="<%=App.ListFields.at(i).get('itemInternalName')%>" <%if(App.ListFields.at(i).get('itemInternalName') == App.ConfigurationSettings.xAxis.filedName){%>selected='selected'<%}%>><%=App.ListFields.at(i).get('itemTitle')%></option>
                            <%}%>
			            </select>
				    </div>
                
			    </div>
                <div class="row-fluid">
                    <div class="span6" style="margin-top:10px;" >
                         <h4 class="text-left">
				            Sort Field Name:
			            </h4>
				    </div>
                    <div class="span6" style="margin-top:10px;" >
                         <select name="FieldName" title="Field Name" class="ms-input" id="sortFieldName" onchange="sortFieldChange(this);">
                            <option value="empty">- select -</option>
                            <%for(var i=0; i < App.ListFields.length; i ++){%>
                             <%if(!App.ListFields.at(i).get('itemTitle')) continue;%>
                            <option value="<%=App.ListFields.at(i).get('itemInternalName')%>" <%if(App.ListFields.at(i).get('itemInternalName') == App.ConfigurationSettings.xAxis.sortName){%>selected='selected'<%}%>><%=App.ListFields.at(i).get('itemTitle')%></option>
                            <%}%>
			            </select>
				    </div>
                </div>
            </div>

            <div id="section2" class="panorama-section " style="clear:both;width:100%;">
                <h2 style="margin:0 0 0 0;"> Y Axis (vertical axis) settings</h2>
                <div class="row-fluid">
				    <div class="span12" style="margin-top:10px;" >
                         <button class="btn btn-large  btn-info" type="button"  id="addNewSeries" onclick="addSeries(); return false;">Add Data Series</button>
                         <button class="btn btn-danger btn-large btn-primary" type="button" onclick="deleteSeries();return false;" id="deleteSelectedSeries">Delete Data Series</button>
				    </div>
                    <table class="table">
                     <thead>
                       <tr>
                         <th>#</th>
                         <th>Field Name</th>
                         <th>Aggregate Function</th>
                         <th>Series Name</th>
                       </tr>
                     </thead>
                     <tbody id="series">

                     </tbody>
                   </table>              
			    </div>
           </div>
        </div>
    </div>
   </div>
</div>
<div class="span6 align-right">
    <a type="button" class="win-command"  id="saveCommand" onclick="javascript:updateConfigurationSettings(); return false;">
        <span class="win-commandimage win-commandring">&#x0052;</span>
        <span class="win-label">Save</span>
    </a>
</div>
<script>
    createSeries();
    function xAxisChange(sender)
    {
        App.ConfigurationSettings.xAxis.filedName = sender.value;
        App.ConfigurationSettings.set({ xAxis: App.ConfigurationSettings.xAxis });
    }
    function sortFieldChange(sender)
    {
        App.ConfigurationSettings.xAxis.sortName = sender.value;
        App.ConfigurationSettings.set({ xAxis: App.ConfigurationSettings.xAxis });
    }
    function addSeries() {
        App.ConfigurationSettings.yAxis.fieldNames.push('');
        App.ConfigurationSettings.yAxis.aggregateFunction.push('Sum');
        App.ConfigurationSettings.yAxis.seriesName.push('');
        App.ConfigurationSettings.set({ yAxis: App.ConfigurationSettings.yAxis });
        createSeries();
    }

    function deleteSeries()
    {
        var checked = false;
        $('input[type="checkbox"][name="checkBox"]:checked').each(function () {
            var index = $(this).attr('index');
            if (index) {
                App.ConfigurationSettings.yAxis.fieldNames.splice(index,1);
                App.ConfigurationSettings.yAxis.aggregateFunction.splice( index,1);
                App.ConfigurationSettings.yAxis.seriesName.splice(index,1);
                checked = true;
            }
        });
        if (checked) {
            App.ConfigurationSettings.set({ yAxis: App.ConfigurationSettings.yAxis });
            createSeries();
        }
    }

    function createSeries() {
        
        var seriesCount = getSeriesCount();
        var series = $('#series');
        series.html('');
        var classNames = ['', 'info'];
        for (var i = 0; i < seriesCount; i++) {
            var className = classNames[i % classNames.length];
            var tr = $('<tr>').appendTo(series).addClass(className).attr('index', i);;
            $('<td>').appendTo(tr).html(createCheckBox(i));
            $('<td>').appendTo(tr).html(createFieldName(i, App.ConfigurationSettings.yAxis.fieldNames[i]));
            $('<td>').appendTo(tr).html(createAggregateFunction(i, App.ConfigurationSettings.yAxis.aggregateFunction[i]));
            var seriesName = $('<td>').appendTo(tr);
            var textBox = $('<input>').attr('id', i).css('color','#000').css('font-size','16px');
            textBox.val(App.ConfigurationSettings.yAxis.seriesName[i]);
            
            textBox.bind('input propertychange', function () {
                App.ConfigurationSettings.yAxis.seriesName[this.id] = this.value;
                App.ConfigurationSettings.set({ yAxis: App.ConfigurationSettings.yAxis });
            });
            seriesName.html(textBox);
        }
    }

    function createCheckBox(index)
    {
        var checkBox = $('<label>').addClass('checkbox').css('margin-top','5px');
        var input = $('<input>', {
            id: 'checkBox' + index,
            type: 'checkbox',
            name:'checkBox',
            value:''
        });
        input.attr('index', index);
        var span = $('<span>').addClass('metro-checkbox');

        checkBox.append(input);
        checkBox.append(span);
        return checkBox;
    }

    function createAggregateFunction(index, selectedValue) {
        var functions = ['Sum', 'Avg', 'Count', 'Min', 'Max'];
        var select = $('<select>').attr('id', 'aggregateFunction' + index);
        for (var i = 0; i < functions.length; i++) {
            var option = $("<option>").appendTo(select).attr('value', functions[i]).text(functions[i]);
        }
        select.val(selectedValue);
        select.bind('change',  function () {
            App.ConfigurationSettings.yAxis.aggregateFunction[index] = this.value;
            App.ConfigurationSettings.set({ yAxis: App.ConfigurationSettings.yAxis });
        });
        return select;
    }

    function createFieldName(index, selectedValue) {
        var id = "yFieldName" + index;
        var select = $('<select>').attr('id', id);
        $("<option>").appendTo(select).attr('value', 'empty').text = '- select -';
        for (var i = 0; i < App.ListFields.length; i++) {
            if (!App.ListFields.at(i).get('itemTitle')) continue;
            var option = $('<option>').appendTo(select).attr('value', App.ListFields.at(i).get('itemInternalName')).text(App.ListFields.at(i).get('itemTitle'));
        }
        select.val(selectedValue);
        select.bind('change', function () {
            App.ConfigurationSettings.yAxis.fieldNames[index] = this.value;
            App.ConfigurationSettings.set({ yAxis: App.ConfigurationSettings.yAxis });
        });
        return select;
    }

    function getSeriesCount() {
        return App.ConfigurationSettings.yAxis.fieldNames.length;
    }
</script>

